<template>
    <div class="digital-asset">
        <van-nav-bar title="数字资产" left-arrow fixed @click-left="onClickLeft" />
        <div class="digital_assest_bg">
            <img src="../../images/mine/bg_sel.png" alt="">
        </div>
        <div class="digital_assest_con">
            <div class="digital_assest_con_title">SEL(享受美好生活)</div>
            <div class="digital_assest_con_info">
                <div>发行</div>
                <div>{{ info.issuance_text }}</div>
            </div>
            <div class="digital_assest_title">资产内容</div>
            <div class="digital_assest_box">
                <img src="../../images/mine/bg_sel.png" alt="">
                <div class="digital_assest_box_info">
                    <div class="title">SEL(享受美好生活)</div>
                    <div class="num">余量:{{ info.remaining }}</div>
                    <div class="price">价格:{{ info.unit_price }}CNY/个</div>
                    <div class="my_num">我的SEL数量:{{ info.balance_sel }}</div>
                </div>
            </div>
            <!--  -->
            <div class="subsidy_title">
                <div class="subsidy_title_list" v-for="item, index in titleList" :key="index"
                    :class="{ 'active': current === index }" @click="setCurrent(index)">{{ item.name }}</div>
            </div>
            <div v-if="current == 0" class="digital_assest_tips">
                <span>从</span>贡献值 <img src="../../images/mine/icon_left.png" alt=""> <span>到</span> SEL
            </div>
            <div class="digital_assest_input">
                <input @input="handleInput" type="text" :placeholder="current == 0 ? '请输入兑换数量' : '请输入卖出数量'"
                    v-model="num">
                <div class="tips">{{ current == 0 ? '贡献值余额' : 'SEL余额' }}:{{ current == 0 ? info.balance_gxz :
                    info.balance_sel
                }}</div>
                <div class="num">预计可获得：{{ obtain_sel }} SEL</div>
                <div class="num" v-if="current==1">预计可获得：{{ obtain_cash }} 现金</div>
            </div>
            <div class="digital_assest_btn" @click="handleSubmit">确认兑换</div>

        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
            <div class="team_list" v-for="(item, index) in fansList" :key="index">
                <div class="digital_assest_sj">
                    <div class="digital_assest_sj_top" v-if="index == 0">
                        <img src="../../images/mine/icon_shuju.png" alt="">{{ current == 0 ? '兑换' : '卖出' }}记录
                    </div>
                    <div class="digital_assest_sj_con" v-if="current == 1">
                        <div>卖出SEL：{{ item.quantity }}</div>
                        <div>卖出总价：{{ (item.quantity * item.unit_price).toFixed(8) }} CNY</div>
                        <div>卖出价格：{{ item.unit_price }} CNY/个</div>
                        <div>回购SEL：{{ item.buyback_data.buyback_sel }}</div>
                        <div>回购总价：{{ item.buyback_data.buyback_cash }} CNY</div>
                        <div>回购价格：{{ item.buyback_data.unit_price }} CNY/个</div>
                        <div>最终获得：{{ item.obtain_cash }}CNY + {{ item.buyback_data.buyback_sel }} SEL</div>
                        <div>{{ item.create_time }}</div>
                        <div class="more" style="color: #31A653;">{{ item.status==0?'正常':item.status==1?'主动卖出':'强制平仓' }}</div>
                    </div>
                    <div class="digital_assest_sj_con" v-else>
                        <div>消耗贡献值：{{ item.quantity }}</div>
                        <div>兑换价格：{{ item.unit_price }} CNY/个</div>
                        <div>销毁SEL：{{ item.destroy_sel }}</div>
                        <div>获得SEL：{{ item.obtain_sel }}</div>
                        <div>{{ item.create_time }}</div>
                        <div class="more">当前{{ item.diff_ratio * 100 > 0 ? '已涨' : '已跌' }}{{ (item.diff_ratio * 100).toFixed(2) }}%</div>
                    </div>
                </div>
            </div>
        </van-list>
        <!--  -->
        <van-popup v-model="showPopup" round closeable @click-close-icon="closeClick" position="bottom"
            class="balance-pay-popup-wrap" :style="{ height: showKeyboard ? '450px' : '250px' }">
            <div class="title">确认支付</div>
            <!-- 交易密码 -->
            <div class="row border-none">
                <span class="desc">请输入支付密码:</span>
            </div>
            <div class="row border-none">
                <van-password-input :value="tradePassword" :focused="showKeyboard"
                    @focus="handleShowKeyboard"></van-password-input>
                <van-number-keyboard v-model="tradePassword" :show="showKeyboard" :maxlength="maxlength"
                    :hide-on-click-outside="false" @input="onPasswordInput" @delete="onPasswordDelete"
                    @blur="showKeyboard = false"></van-number-keyboard>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { DIGITAL_ASSET_DATA, DIGITAL_ASSET_PAGE_LIST, DIGITAL_ASSET_SWAP, DIGITAL_ASSET_ESTIMATE, DIGITAL_ASSET_SELL } from '@/api/mine'
export default {
    data() {
        return {
            titleList: [
                {
                    id: 0,
                    name: 'SEL兑换'
                },
                {
                    id: 1,
                    name: 'SEL卖出'
                }
            ],
            current: 0,
            num: '',
            info: {},
            showPopup: false,
            maxlength: 6,
            showKeyboard: false,
            tradePassword: "",
            completePassword: false,
            timeoutId: null,
            obtain_cash: 0,
            obtain_sel:0,
            finished: false,
            loading: false,
            fansList: [],
            page: 1,
            pageSize: 20
        }
    },
    mounted() {
        this.current = Number(this.$route.query.msg)
        this.initData()

    },
    beforeDestroy() {
        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
        }
    },
    methods: {
        onLoad() {
            let params = {};
            params["page_num"] = this.page;
            params["page_size"] = this.pageSize;
            params["type"] = this.current
            // params['status'] = this.active;
            this.$http.get(DIGITAL_ASSET_PAGE_LIST, {
                params: params
            }).then((res) => {
                const {
                    list
                } = res.data;
                // this.total_count = res.data.pages.total_count;
                if (list && list.length) {
                    this.page++;
                    this.fansList = this.fansList.concat(list);
                    this.fansList = this.fansList.map(item => {
                        if (item.buyback_data) {
                            item.buyback_data = JSON.parse(item.buyback_data);
                        }
                        return item; // 确保返回修改后的 item
                    })
                    // 加载状态结束
                    this.loading = false;
                    if (list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            });
        },
        // digitalAssetList() {
        //     this.$http.get(DIGITAL_ASSET_PAGE_LIST).then(res => {
        //         console.log(res)
        //     })
        // },
        onClickLeft() {
            this.$router.go(-1);
        },
        initData() {

            this.$http.get(DIGITAL_ASSET_DATA).then(res => {
                this.info = res.data
            })
            this.handleRevenue()
        },
        handleSubmit() {
            if (this.num == '') return this.$toast('请输入兑换的数量')
            if (this.current == 0 ? this.info.balance_gxz < this.num : this.info.balance_sel < this.num) return this.$toast(this.current == 0 ? '贡献值不足' : 'SEL不足')
            this.showPopup = true

        },
        handleInput(e) {
            const newValue = e.target.value; // 获取新的输入值

            // 如果输入值发生变化，清除之前的定时器
            if (this.timeoutId) {
                clearTimeout(this.timeoutId);
            }

            // 设置新的定时器
            this.timeoutId = setTimeout(() => {
                this.makeRequest(newValue);
            }, 1000);
        },
        makeRequest() {
            console.log('请求发送:', this.num);
            // 在这里发送你的请求，例如：
            let params = {
                quantity: this.num,
                type: this.current
            }
            this.$http.post(DIGITAL_ASSET_ESTIMATE, params).then(res => {
                // clearInterval(this.intervalId);
                // if (this.current == 0) {
                //     this.obtain = res.data.obtain_sel
                // } else {
                //     this.obtain = res.data.obtain_cash
                // }
                this.obtain_cash = res.data.obtain_cash
                this.obtain_sel = res.data.obtain_sel
            })
        },
        handleRevenue() {
            this.page = 1
            this.loading = true
            this.fansList = []
            this.finished = false
            this.onLoad()
        },
        setCurrent(index) {
            this.current = index
            this.num = ''
            this.obtain_cash=0
            this.obtain_sel=0
            this.handleRevenue()
        },
        handleShowKeyboard() {
            this.tradePassword = "";
            this.completePassword = false;
            this.showKeyboard = true;
        },
        onPasswordInput(t) {
            (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
                this.tradePassword.length !== this.maxlength ||
                this.completePassword ||
                ((this.completePassword = !0), this.onSubmit());
        },
        onPasswordDelete() {
            this.tradePassword &&
                ((this.tradePassword = this.tradePassword.slice(
                    0,
                    this.tradePassword.length - 1
                )),
                    (this.completePassword = this.tradePassword.length === this.maxlength));
        },
        closeClick() {
            this.showPopup = false;
            this.tradePassword = '';
            this.completePassword = ''
        },
        onSubmit() {
            // if (this.loading) {
            //     return;
            // }
            // this.loading = true;
            let params = {
                quantity: this.num,
                pay_password: this.tradePassword,
            };
            let api = this.current == 0 ? DIGITAL_ASSET_SWAP : DIGITAL_ASSET_SELL
            this.$http.post(api, params)
                .then(() => {
                    this.loading = false;
                    this.showPopup = false;
                    this.$toast.success('成功');
                    this.num = ''
                    this.pay_password = ''
                    this.tradePassword = '';
                    this.completePassword = ''
                    this.obtain_cash = 0
                    this.obtain_sel = 0
                    //   this.$emit('refreshData');
                    this.initData()
                })
                .catch(() => {
                    this.loading = false;
                })
        }
    },
}
</script>
<style lang="scss" scoped>
::v-deep .van-nav-bar .van-icon {
    color: #333333;
}

::v-deep .van-nav-bar__arrow {
    font-size: 20px;
}

::v-deep .van-hairline--bottom::after {
    display: none;
}

::v-deep .van-nav-bar--fixed {
    z-index: 3;
}

.balance-pay-popup-wrap {
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    text-align: center;
    padding: 0.32rem;
    box-sizing: border-box;

    .title {
        color: #1b1b1b;
        font-size: 0.36rem;
        font-weight: 700;
        margin-bottom: 0.3rem;
    }

    .row {
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid #ebedf0;

        &.border-none {
            border: none;
        }
    }

    .van-password-input {
        width: 100%;
        margin: 0;
    }
}

.digital-asset {
    padding-top: 46px;
    background: #F5F5F5;
    padding-bottom: .48rem;

    .digital_assest_bg {
        width: 100%;

        img {
            width: 100%;
        }
    }
}

.digital_assest_con {
    // height: 634px;
    background: #FFFFFF;
    border-radius: 14px 14px 0px 0px;
    margin-top: -.3rem;
    // padding: .32rem .38rem;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    padding-bottom: .6rem;

    .digital_assest_con_title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: .32rem;
        color: #333333;
        padding: .32rem .38rem 0 .38rem;
    }

    .digital_assest_con_info {
        width: 2.97rem;
        height: .6rem;
        background: url('../../images/mine/icon_sel.png') no-repeat center;
        background-size: cover;
        display: flex;
        align-items: center;
        // margin-top: ;
        margin: .28rem .38rem 0 .38rem;

        div:first-child {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .28rem;
            color: #FFFFFF;
            margin-left: .28rem;
        }

        div:last-child {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .28rem;
            color: #333333;
            margin-left: .5rem;
        }
    }

    .digital_assest_title {
        width: 2.4rem;
        height: .6rem;
        margin: 0 auto;
        background: url('../../images/mine/icon_sel1.png') no-repeat center;
        background-size: cover;
        margin-top: .6rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: .32rem;
        line-height: .6rem;
        color: #327044;
        text-align: center;
    }

    .digital_assest_box {
        background: #FFFFFF;
        box-shadow: 0px 0px .12rem 0px rgba(0, 0, 0, 0.1);
        border-radius: .2rem;
        padding: .24rem;
        margin-top: .36rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        margin: .36rem .38rem 0 .38rem;

        img {
            width: 2.28rem;
            border-radius: .1rem;
        }

        .digital_assest_box_info {
            width: calc(100% - 2.6rem);
            font-family: PingFangSC, PingFang SC;

            .title {
                font-weight: 600;
                font-size: .32rem;
                color: #333333;
            }

            .num {
                font-weight: 400;
                font-size: .24rem;
                color: #333333;
                margin-top: .2rem;
            }

            .price {
                font-weight: 400;
                font-size: .24rem;
                color: #333333;
                margin-top: .08rem;
            }

            .my_num {
                font-weight: 400;
                font-size: .24rem;
                color: #31A653;
                margin-top: .44rem;
            }
        }
    }

    .subsidy_title {
        // width: 95%;
        margin: 0 auto;
        // margin-top: 0.3rem;
        display: flex;
        font-size: 0.3rem;
        // padding: .24rem .24rem 0 .24rem;
        box-sizing: border-box;
        background-color: #fff;
        border-bottom: 1px solid #E3E3E3;
        margin-top: .4rem;

        .subsidy_title_list {
            margin-right: 0.4rem;
            // font-size: 0.28rem;
            position: relative;
            color: #666666;
            padding-bottom: 0.08rem;
            margin: 0 .38rem 0 .38rem;
            font-weight: 400;
        }

        .subsidy_title_list.active {
            color: #31A653;
            font-weight: 400;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 50%;
                transform: translateX(-50%);
                height: .06rem; // 横杠的高度，可以根据需要调整
                border-radius: .04rem;
                background-color: #31A653; // 红色横杠
            }

            /* 选中时黑色 */
        }
    }

    .digital_assest_tips {
        display: flex;
        align-items: center;
        margin: .4rem .38rem 0 .38rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: .3rem;
        color: #31A653;

        img {
            width: .58rem;
            margin: 0 .28rem;
        }

        span {
            font-weight: 400;
            font-size: .28rem;
            color: #666666;
            margin: 0 .02rem;
        }
    }

    .digital_assest_input {
        margin: .4rem .38rem 0 .38rem;

        input {
            width: 100%;
            height: .96rem;
            border: none;
            background: #F8F8F8;
            border-radius: .16rem;
            font-size: .3rem;
            text-indent: .2rem;
        }

        .tips {
            margin-top: .12rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .24rem;
            color: #FF6200;
        }

        .num {
            background: rgba(49, 166, 83, 0.1);
            border-radius: .16rem;
            border: 1px solid #31A653;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .32rem;
            text-align: center;
            color: #333333;
            padding: .26rem 0;
            margin-top: .32rem;
        }
    }

    .digital_assest_btn {
        width: 4.14rem;
        background: linear-gradient(136deg, #6EC069 0%, #42A633 100%);
        border-radius: .44rem;
        // display: inline;
        margin: 0 auto;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: .32rem;
        color: #FFFFFF;
        padding: .22rem 0;
        box-sizing: border-box;
        margin-top: .8rem;
        // margin-bottom: .6rem;
    }

}

.digital_assest_sj {
    background: #FFFFFF;
    border-radius: .16rem;
    margin: .28rem .24rem 0 .24rem;

    // padding:.24rem  ;
    .digital_assest_sj_top {
        background: #f5faf6;
        border-radius: 8px 8px 0px 0px;
        // opacity: 0.06;
        padding: .16rem .24rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: .28rem;
        color: #333333;
        display: flex;
        align-items: center;

        img {
            width: .32rem;
            margin-right: .06rem;
        }
    }

    .digital_assest_sj_con {
        padding: .24rem .32rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.28rem;
        color: #666666;
        position: relative;
        line-height: .52rem;
    }

    .more {
        position: absolute;
        right: .32rem;
        top: 50%;
        transform: translateY(-50%);
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #FF6200;
    }
}
</style>